Next.js Middleware: Dinamik Ilovalar Uchun So‘rovlarni Tutib Olishni O‘zlashtirish

Next.js middleware so‘rovlar marshrutlaringizga yetib borguncha ularni tutib olish va o‘zgartirishning moslashuvchan va kuchli usulini taqdim etadi. Bu imkoniyat sizga autentifikatsiya va avtorizatsiyadan tortib qayta yo‘naltirish va A/B testlashgacha bo‘lgan keng ko‘lamli funksiyalarni amalga oshirishga imkon beradi, shu bilan birga unumdorlikni optimallashtiradi. Ushbu keng qamrovli qo‘llanma sizni Next.js middleware-ning asosiy tushunchalari bilan tanishtiradi va undan qanday samarali foydalanishni ko‘rsatib beradi.

Next.js Middleware nima?

Next.js-dagi middleware — bu so‘rov bajarilishidan oldin ishga tushadigan funksiya. U sizga quyidagilarga imkon beradi:

• So‘rovlarni tutib olish: Kiruvchi so‘rovning sarlavhalari, kukilari va URL manzilini tekshirish.
• So‘rovlarni o‘zgartirish: URL manzillarini qayta yozish, sarlavhalarni o‘rnatish yoki ma'lum mezonlar asosida foydalanuvchilarni qayta yo‘naltirish.
• Kodni bajarish: Sahifa render qilinishidan oldin server tomonidagi mantiqni ishga tushirish.

Middleware funksiyalari loyihangizning ildiz qismidagi middleware.ts (yoki middleware.js) faylida aniqlanadi. Ular ilovangizdagi har bir marshrut uchun yoki sozlanadigan moslagichlar (matchers) asosida ma'lum marshrutlar uchun bajariladi.

Asosiy Tushunchalar va Afzalliklar

Request Ob'ekti

request ob'ekti kiruvchi so'rov haqidagi ma'lumotlarga kirishni ta'minlaydi, jumladan:

• request.url: So‘rovning to‘liq URL manzili.
• request.method: HTTP usuli (masalan, GET, POST).
• request.headers: So‘rov sarlavhalarini o‘z ichiga olgan ob'ekt.
• request.cookies: So‘rov kukilarini ifodalovchi ob'ekt.
• request.geo: Mavjud bo‘lsa, so‘rov bilan bog‘liq geolokatsiya ma'lumotlarini taqdim etadi.

Response Ob'ekti

Middleware funksiyalari so‘rov natijasini boshqarish uchun Response ob'ektini qaytaradi. Siz quyidagi javoblardan foydalanishingiz mumkin:

• NextResponse.next(): So‘rovni odatdagidek qayta ishlashda davom etadi, bu uning belgilangan marshrutga yetib borishiga imkon beradi.
• NextResponse.redirect(url): Foydalanuvchini boshqa URL manziliga qayta yo‘naltiradi.
• NextResponse.rewrite(url): So‘rov URL manzilini qayta yozadi va qayta yo‘naltirishsiz boshqa sahifani samarali tarzda taqdim etadi. Brauzerda URL o‘zgarmaydi.
• Maxsus Response ob'ektini qaytarish: Xatolik sahifasi yoki maxsus JSON javobi kabi maxsus tarkibni taqdim etishga imkon beradi.

Moslagichlar (Matchers)

Moslagichlar sizning middleware-ingiz qaysi marshrutlarga qo‘llanilishi kerakligini belgilashga imkon beradi. Siz moslagichlarni regular ifodalar yoki yo‘l naqshlari yordamida aniqlashingiz mumkin. Bu sizning middleware-ingiz faqat zarur bo‘lganda ishlashini ta'minlaydi, unumdorlikni oshiradi va ortiqcha yukni kamaytiradi.

Edge Runtime

Next.js middleware Edge Runtime'da ishlaydi, bu foydalanuvchilaringizga yaqin joylashtirilishi mumkin bo'lgan yengil JavaScript ish vaqti muhitidir. Bu yaqinlik kechikishni minimallashtiradi va ilovangizning umumiy ish faoliyatini, ayniqsa global miqyosda tarqalgan foydalanuvchilar uchun yaxshilaydi. Edge Runtime Vercel's Edge Network va boshqa mos platformalarda mavjud. Edge Runtime ba'zi cheklovlarga ega, xususan, Node.js API'laridan foydalanishda.

Amaliy Misollar: Middleware Funksiyalarini Amalga Oshirish

1. Autentifikatsiya

Autentifikatsiya middleware-i foydalanuvchilarning tizimga kirishini talab qiladigan marshrutlarni himoya qilish uchun ishlatilishi mumkin. Kukilar yordamida autentifikatsiyani qanday amalga oshirishga misol:

            
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth_token');

 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 return NextResponse.next()
}

export const config = {
 matcher: ['/dashboard/:path*'],
}

            

              
                Copy
              
            
          

Ushbu middleware auth_token kuki mavjudligini tekshiradi. Agar kuki topilmasa, foydalanuvchi /login sahifasiga qayta yo‘naltiriladi. config.matcher bu middleware faqat /dashboard ostidagi marshrutlar uchun ishlashi kerakligini belgilaydi.

Global Perspektiva: Turli mintaqalardagi foydalanuvchilarga xizmat ko'rsatish uchun autentifikatsiya mantiqini turli autentifikatsiya usullarini (masalan, OAuth, JWT) qo'llab-quvvatlaydigan qilib moslashtiring va turli identifikatsiya provayderlari (masalan, Google, Facebook, Azure AD) bilan integratsiya qiling.

2. Avtorizatsiya

Avtorizatsiya middleware-i foydalanuvchi rollari yoki ruxsatlari asosida resurslarga kirishni nazorat qilish uchun ishlatilishi mumkin. Misol uchun, sizda faqat ma'lum foydalanuvchilar kira oladigan administrator paneli bo‘lishi mumkin.

            
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
 const token = request.cookies.get('auth_token');

 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 // Misol: API'dan foydalanuvchi rollarini olish (o'zingizning mantiqingiz bilan almashtiring)
 const userResponse = await fetch('https://api.example.com/userinfo', {
 headers: {
 Authorization: `Bearer ${token}`,
 },
 });
 const userData = await userResponse.json();

 if (userData.role !== 'admin') {
 return NextResponse.redirect(new URL('/unauthorized', request.url))
 }

 return NextResponse.next()
}

export const config = {
 matcher: ['/admin/:path*'],
}

            

              
                Copy
              
            
          

Ushbu middleware foydalanuvchining rolini oladi va uning admin rolida ekanligini tekshiradi. Aks holda, ular /unauthorized sahifasiga qayta yo‘naltiriladi. Ushbu misolda o'rinbosar API nuqtasi ishlatilgan. `https://api.example.com/userinfo` ni o'zingizning haqiqiy autentifikatsiya server nuqtangiz bilan almashtiring.

Global Perspektiva: Foydalanuvchi ma'lumotlari bilan ishlashda ma'lumotlar maxfiyligi qoidalariga (masalan, GDPR, CCPA) e'tibor bering. Nozik ma'lumotlarni himoya qilish va mahalliy qonunlarga rioya qilish uchun tegishli xavfsizlik choralarini amalga oshiring.

3. Qayta yo‘naltirish

Qayta yo‘naltirish middleware-i foydalanuvchilarni ularning joylashuvi, tili yoki boshqa mezonlariga qarab qayta yo‘naltirish uchun ishlatilishi mumkin. Masalan, siz foydalanuvchilarni ularning IP manzili asosida veb-saytingizning mahalliylashtirilgan versiyasiga yo‘naltirishingiz mumkin.

            
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
 const country = request.geo?.country || 'US'; // Geo-joylashuv aniqlanmasa, AQShga standartlashtirish

 if (country === 'DE') {
 return NextResponse.redirect(new URL('/de', request.url))
 }

 if (country === 'FR') {
 return NextResponse.redirect(new URL('/fr', request.url))
 }

 return NextResponse.next()
}

export const config = {
 matcher: ['/'],
}

            

              
                Copy
              
            
          

Ushbu middleware foydalanuvchining mamlakatini uning IP manzili asosida tekshiradi va ularni veb-saytning tegishli mahalliylashtirilgan versiyasiga (Germaniya uchun /de, Fransiya uchun /fr) qayta yo‘naltiradi. Agar geo-joylashuvni aniqlash muvaffaqiyatsiz bo‘lsa, u AQSh versiyasiga standartlashtiriladi. E'tibor bering, bu geo xususiyatining mavjudligiga tayanadi (masalan, Vercel'da joylashtirilganda).

Global Perspektiva: Veb-saytingiz bir nechta tillarni va valyutalarni qo'llab-quvvatlashiga ishonch hosil qiling. Foydalanuvchilarga o'zlari afzal ko'rgan til yoki mintaqani qo'lda tanlash imkoniyatini bering. Har bir lokal uchun mos sana va vaqt formatlaridan foydalaning.

4. A/B Testlash

Middleware A/B testlashni amalga oshirish uchun ishlatilishi mumkin, bunda foydalanuvchilar tasodifiy ravishda sahifaning turli variantlariga tayinlanadi va ularning xatti-harakatlari kuzatiladi. Mana soddalashtirilgan misol:

            
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

function getRandomVariant() {
 return Math.random() < 0.5 ? 'A' : 'B';
}

export function middleware(request: NextRequest) {
 let variant = request.cookies.get('variant')?.value;

 if (!variant) {
 variant = getRandomVariant();
 const response = NextResponse.next();
 response.cookies.set('variant', variant);
 return response;
 }

 if (variant === 'B') {
 return NextResponse.rewrite(new URL('/variant-b', request.url));
 }

 return NextResponse.next();
}

export const config = {
 matcher: ['/'],
}

            

              
                Copy
              
            
          

Ushbu middleware foydalanuvchilarni 'A' yoki 'B' variantiga tayinlaydi. Agar foydalanuvchida hali variant kukisi bo‘lmasa, biri tasodifiy tayinlanadi va o‘rnatiladi. 'B' variantiga tayinlangan foydalanuvchilar /variant-b sahifasiga qayta yoziladi. Keyin siz har bir variantning samaradorligini aniqlash uchun uning ishlashini kuzatib borasiz.

Global Perspektiva: A/B testlarini loyihalashda madaniy farqlarni hisobga oling. Bir mintaqada yaxshi ishlaydigan narsa boshqa mintaqadagi foydalanuvchilarga ta'sir qilmasligi mumkin. A/B testlash platformangiz turli mintaqalardagi maxfiylik qoidalariga mos kelishiga ishonch hosil qiling.

5. Funksiya Bayroqlari

Funksiya bayroqlari sizga yangi kodni joylashtirmasdan ilovangizdagi funksiyalarni yoqish yoki o‘chirish imkonini beradi. Middleware foydalanuvchining ID'si, joylashuvi yoki boshqa mezonlariga qarab ma'lum bir funksiyaga kirish huquqiga ega bo‘lishi kerakligini aniqlash uchun ishlatilishi mumkin.

            
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
 // Misol: API'dan funksiya bayroqlarini olish
 const featureFlagsResponse = await fetch('https://api.example.com/featureflags', {
 headers: {
 'X-User-Id': 'user123',
 },
 });
 const featureFlags = await featureFlagsResponse.json();

 if (featureFlags.new_feature_enabled) {
 // Yangi funksiyani yoqish
 return NextResponse.next();
 } else {
 // Yangi funksiyani o'chirish (masalan, muqobil sahifaga yo'naltirish)
 return NextResponse.redirect(new URL('/alternative-page', request.url));
 }
}

export const config = {
 matcher: ['/new-feature'],
}

            

              
                Copy
              
            
          

Ushbu middleware API'dan funksiya bayroqlarini oladi va new_feature_enabled bayrog‘i o‘rnatilganligini tekshiradi. Agar shunday bo‘lsa, foydalanuvchi /new-feature sahifasiga kira oladi. Aks holda, ular /alternative-page sahifasiga qayta yo‘naltiriladi.

Global Perspektiva: Yangi funksiyalarni turli mintaqalardagi foydalanuvchilarga bosqichma-bosqich taqdim etish uchun funksiya bayroqlaridan foydalaning. Bu sizga funksiyani kengroq auditoriyaga chiqarishdan oldin unumdorlikni kuzatish va har qanday muammolarni hal qilish imkonini beradi. Shuningdek, funksiya bayroqlari tizimingiz global miqyosda kengayishiga va foydalanuvchining joylashuvidan qat'i nazar, izchil natijalar berishiga ishonch hosil qiling. Funksiyalarni joriy etishda mintaqaviy me'yoriy cheklovlarni hisobga oling.

Ilg‘or Texnikalar

Middleware-ni zanjirlash

Siz so‘rov bo‘yicha bir qator operatsiyalarni bajarish uchun bir nechta middleware funksiyalarini bir-biriga zanjir qilib bog‘lashingiz mumkin. Bu murakkab mantiqni kichikroq, boshqarilishi osonroq modullarga bo‘lish uchun foydali bo‘lishi mumkin.

            
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
 const response = NextResponse.next();

 // Birinchi middleware funksiyasi
 const token = request.cookies.get('auth_token');
 if (!token) {
 return NextResponse.redirect(new URL('/login', request.url))
 }

 // Ikkinchi middleware funksiyasi
 response.headers.set('x-middleware-custom', 'value');

 return response;
}

export const config = {
 matcher: ['/dashboard/:path*'],
}

            

              
                Copy
              
            
          

Ushbu misolda ikkita middleware birda ko'rsatilgan. Birinchisi autentifikatsiyani amalga oshiradi va ikkinchisi maxsus sarlavha o'rnatadi.

Muhit o'zgaruvchilaridan foydalanish

API kalitlari va ma'lumotlar bazasi hisob ma'lumotlari kabi nozik ma'lumotlarni middleware funksiyalaringizda qattiq kodlash o‘rniga muhit o‘zgaruvchilarida saqlang. Bu xavfsizlikni yaxshilaydi va ilovangiz konfiguratsiyasini boshqarishni osonlashtiradi.

            
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const API_KEY = process.env.API_KEY;

export async function middleware(request: NextRequest) {
 const response = await fetch('https://api.example.com/data', {
 headers: {
 'X-API-Key': API_KEY,
 },
 });

 // ...
}

export const config = {
 matcher: ['/data'],
}

            

              
                Copy
              
            
          

Ushbu misolda API_KEY muhit o'zgaruvchisidan olinadi.

Xatoliklarni qayta ishlash

Kutilmagan xatolar ilovangizni ishdan chiqarishining oldini olish uchun middleware funksiyalaringizda mustahkam xatoliklarni qayta ishlashni amalga oshiring. Istisnolarni ushlash va xatoliklarni tegishli ravishda qayd etish uchun try...catch bloklaridan foydalaning.

            
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
 try {
 const response = await fetch('https://api.example.com/data');
 // ...
 } catch (error) {
 console.error('Ma\'lumotlarni olishda xatolik:', error);
 return NextResponse.error(); // Yoki xatolik sahifasiga yo'naltirish
 }
}

export const config = {
 matcher: ['/data'],
}

            

              
                Copy
              
            
          

Eng yaxshi amaliyotlar

• Middleware funksiyalarini yengil saqlang: Middleware-da hisoblash jihatidan intensiv operatsiyalarni bajarishdan saqlaning, chunki bu unumdorlikka ta'sir qilishi mumkin. Murakkab qayta ishlashni fon vazifalariga yoki maxsus xizmatlarga yuklang.
• Moslagichlardan samarali foydalaning: Middleware-ni faqat uni talab qiladigan marshrutlarga qo‘llang.
• Middleware-ingizni sinchkovlik bilan sinab ko'ring: Middleware funksiyalaringiz to‘g‘ri ishlayotganiga ishonch hosil qilish uchun birlik testlarini yozing.
• Middleware unumdorligini kuzatib boring: Middleware funksiyalaringizning unumdorligini kuzatish va har qanday to‘siqlarni aniqlash uchun monitoring vositalaridan foydalaning.
• Middleware-ingizni hujjatlashtiring: Har bir middleware funksiyasining maqsadi va funksionalligini aniq hujjatlashtiring.
• Edge Runtime cheklovlarini hisobga oling: Edge Runtime cheklovlari, masalan, Node.js API-larining yo‘qligi haqida xabardor bo‘ling. Kodingizni shunga mos ravishda sozlang.

Umumiy Muammolarni Bartaraf Etish

• Middleware ishlamayapti: Middleware to‘g‘ri marshrutlarga qo‘llanilayotganiga ishonch hosil qilish uchun moslagich konfiguratsiyangizni ikki marta tekshiring.
• Unumdorlik muammolari: Sekin ishlaydigan middleware funksiyalarini aniqlang va optimallashtiring. Unumdorlikdagi to‘siqlarni aniqlash uchun profillash vositalaridan foydalaning.
• Edge Runtime mosligi: Kodingiz Edge Runtime bilan mos kelishiga ishonch hosil qiling. Qo‘llab-quvvatlanmaydigan Node.js API-laridan foydalanishdan saqlaning.
• Kuki muammolari: Kukilar to‘g‘ri o‘rnatilayotgani va olinayotganini tekshiring. domain, path va secure kabi kuki atributlariga e'tibor bering.
• Sarlavha ziddiyatlari: Middleware-da maxsus sarlavhalarni o‘rnatishda yuzaga kelishi mumkin bo‘lgan sarlavha ziddiyatlaridan xabardor bo‘ling. Sizning sarlavhalaringiz mavjud sarlavhalarni beixtiyor bekor qilmayotganiga ishonch hosil qiling.

Xulosa

Next.js middleware dinamik va shaxsiylashtirilgan veb-ilovalarni yaratish uchun kuchli vositadir. So‘rovlarni tutib olishni o‘zlashtirib, siz autentifikatsiya va avtorizatsiyadan tortib qayta yo‘naltirish va A/B testlashgacha bo‘lgan keng ko‘lamli funksiyalarni amalga oshirishingiz mumkin. Ushbu qo‘llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz global foydalanuvchilar bazangizning ehtiyojlarini qondiradigan yuqori unumdorlikka ega, xavfsiz va kengaytiriladigan ilovalarni yaratish uchun Next.js middleware-dan foydalanishingiz mumkin. Next.js loyihalaringizda yangi imkoniyatlarni ochish va ajoyib foydalanuvchi tajribalarini taqdim etish uchun middleware kuchini qabul qiling.